<template>
  <div class="ele-body">
    <el-row :gutter="15">
      <el-col :span="24">
        <el-card shadow="never"
                 body-style="padding: 0;">
          <el-tabs v-model="active"
                   class="user-info-tabs">
            <el-tab-pane label="数据库安装"
                         name="info">
              <el-form ref="form"
                       :model="form"
                       :rules="rules"
                       label-width="140px"
                       style="padding: 34px 20px 0 20px"
                       @keyup.enter.native="save"
                       @submit.native.prevent>
                <el-form-item label="数据库地址:"
                              prop="db_host"
                              label-width="150px"
                              class="delInput">
                  <div class="flex-align-center">
                    <el-input v-model="form.db_host"
                              placeholder="请输入数据库地址"
                              clearable
                              style="width: 300px" />
                  </div>
                </el-form-item>
                <el-form-item label="数据库端口:"
                              prop="db_port"
                              label-width="150px"
                              class="delInput">
                  <div class="flex-align-center">
                    <el-input v-model="form.db_port"
                              placeholder="请输入数据库端口"
                              clearable
                              style="width: 300px" />
                  </div>
                </el-form-item>
                <el-form-item label="数据库名字:"
                              prop="db_name"
                              label-width="150px"
                              class="delInput">
                  <div class="flex-align-center">
                    <el-input v-model="form.db_name"
                              placeholder="请输入数据库名称"
                              clearable
                              style="width: 300px" />
                  </div>
                </el-form-item>
                <el-form-item label="数据库前缀:"
                              prop="db_prefix"
                              label-width="150px"
                              class="delInput">
                  <div class="flex-align-center">
                    <el-input v-model="form.db_prefix"
                              placeholder="请输入数据库前缀"
                              clearable
                              style="width: 300px" />
                  </div>
                </el-form-item>
                <el-form-item label="数据库账号:"
                              prop="db_user"
                              label-width="150px"
                              class="delInput">
                  <div class="flex-align-center">
                    <el-input v-model="form.db_user"
                              placeholder="请输入数据库账号"
                              clearable
                              style="width: 300px" />
                  </div>
                </el-form-item>
                <el-form-item label="数据库密码:"
                              prop="db_pwd"
                              label-width="150px"
                              class="delInput">
                  <div class="flex-align-center">
                    <el-input v-model="form.db_pwd"
                              show-password
                              placeholder="请输入数据库密码"
                              clearable
                              style="width: 300px" />
                  </div>
                </el-form-item>
                <el-form-item label="管理员账号:"
                              prop="admin"
                              label-width="150px"
                              class="delInput">
                  <div class="flex-align-center">
                    <el-input v-model="form.admin"
                              placeholder="请输入管理员账号"
                              clearable
                              style="width: 300px" />
                  </div>
                </el-form-item>
                <el-form-item label="管理员密码:"
                              prop="password"
                              label-width="150px"
                              class="delInput">
                  <div class="flex-align-center">
                    <el-input v-model="form.password"
                              show-password
                              placeholder="请输入管理员密码"
                              clearable
                              style="width: 300px" />
                  </div>
                </el-form-item>

                <el-form-item label="再次确定管理员密码:"
                              prop="rpassword"
                              label-width="150px"
                              class="delInput">
                  <div class="flex-align-center">
                    <el-input v-model="form.rpassword"
                              show-password
                              placeholder="请输入再次确定管理员密码"
                              clearable
                              style="width: 300px" />
                  </div>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary"
                             :loading="loading"
                             @click="save">
                    保存更改
                  </el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>

    <el-image-viewer v-if="showViewer"
                     style="z-index: 9999"
                     :on-close="closeViewer"
                     :url-list="listArry" />
  </div>
</template>
	
	<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
import { config, } from '@/api/config/index';
import { install } from '@/api/version/index'
export default {
  name: 'messageNotify',

  components: { ElImageViewer },
  data () {
    return {
      // tab页选中
      active: 'info',
      form: {
        // 数据库端口
        db_port: '',
        // 数据库地址
        db_host: '',
        // 数据库名字
        db_name: '',
        // 数据库前缀
        db_prefix: '',
        // 数据库账号
        db_user: '',
        // 数据库密码
        db_pwd: '',
        // 管理员账户
        admin: '',
        // 管理员密码

        password: '',
        // 确定密码
        rpassword: ''
      },

      url: '',
      urlListArray: [],
      listArry: [],
      showViewer: false,
      // 保存按钮loading
      loading: false,
      // 是否显示裁剪弹窗
      visible: false,
      rules: {
        db_host: [
          {
            required: true,
            message: '请输入数据库地址',
            trigger: 'blur'
          }
        ],
        db_port: [
          {
            required: true,
            message: '请输入数据库端口',
            trigger: 'blur'
          }
        ],
        db_name: [
          {
            required: true,
            message: '请输入数据库名字',
            trigger: 'blur'
          }
        ],
        db_prefix: [
          {
            required: true,
            message: '请输入数据库前缀',
            trigger: 'blur'
          }
        ],

        db_user: [
          {
            required: true,
            message: '请输入数据库账号',
            trigger: 'blur'
          }
        ],
        db_pwd: [
          {
            required: true,
            message: '请输入数据库密码',
            trigger: 'blur'
          }
        ],

        admin: [
          {
            required: true,
            message: '请输入管理员账户',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入管理员密码',
            trigger: 'blur'
          }
        ],
        rpassword: [
          {
            required: true,
            message: '请输入管理员再次确定密码',
            trigger: 'blur'
          }
        ],
      }
    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  created () {
    this.querys();
  },
  methods: {
    querys () {
      // 查询回显
      config({})
        .then((msg) => {
          console.log(msg);
          if (msg.data) {
            //   是修改
            this.$util.assignObject(this.form, {
              ...msg.data
            });

            this.isUpdata = true;
          } else {
            // 修改
            this.isUpdata = false;
          }
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },

    // 关闭查看器
    closeViewer () {
      this.showViewer = false;
    },
    /* 表单提交 */
    save () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const data = {
            ...this.form
          };
          console.log(data)

          this.loading = true;
          install(data)
            .then(() => {
              this.loading = false;

              // }
              this.$message.success('安装成功！');

              setTimeout(() => {
                this.$router.push('/login');
              }, 500)
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          //   this.validMsg = ` 共有校验 ${Object.keys(obj).length} 项不通过`;
          return false;
        }
      });
    }
  }
};
  </script>
	
	<style lang="less" scoped>
/*隐藏input（type=number)右边的小箭头*/
/deep/.delInput input::-webkit-outer-spin-button,
/deep/.delInput input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/.delInput input[type='number'] {
  -moz-appearance: textfield;
}
.ele-body {
  padding-bottom: 0;
}

.el-card {
  margin-bottom: 15px;
}

/* 用户资料卡片 */
.user-info-card {
  padding: 8px 0;
  text-align: center;

  .user-info-avatar-group {
    position: relative;
    cursor: pointer;
    margin: 0 auto;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;

    & > i {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-size: 30px;
      display: none;
      z-index: 2;
    }

    &:hover {
      & > i {
        display: block;
      }

      &:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
      }
    }
  }

  .user-info-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
  }

  .user-info-name {
    font-size: 24px;
    margin-top: 20px;
  }

  .user-info-desc {
    margin-top: 8px;
  }
}

/* 用户信息列表 */
.user-info-list {
  margin-top: 30px;

  .user-info-item {
    margin-bottom: 16px;
    display: flex;
    align-items: baseline;

    & > i {
      margin-right: 10px;
      font-size: 16px;
    }

    & > span {
      flex: 1;
      display: block;
    }
  }
}

/* 用户标签 */
.user-info-tags .el-tag {
  margin: 10px 10px 0 0;
}

/* 用户账号绑定列表 */
.user-account-list {
  padding: 16px 20px;

  .user-account-item {
    padding: 15px;

    .ele-text-secondary {
      margin-top: 6px;
    }

    .user-account-icon {
      width: 42px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      color: #fff;
      font-size: 26px;
      border-radius: 50%;
      background-color: #3492ed;
      box-sizing: border-box;

      &.el-icon-_wechat {
        background-color: #4daf29;
        font-size: 28px;
      }

      &.el-icon-_alipay {
        background-color: #1476fe;
        padding-left: 5px;
        font-size: 32px;
      }
    }
  }
}

/* tab 页签 */
.user-info-tabs {
  :deep(.el-tabs__nav-wrap) {
    padding-left: 24px;
  }

  :deep(.el-tabs__item) {
    height: 50px;
    line-height: 50px;
    font-size: 15px;
  }
}
</style>
	